<template>
  <div class="gotoTop">
    <el-row :gutter="22">
      <el-col :xl="2" :lg="1" :md="2" :sm="2" :xs="0" :offset="5">
        <el-row>
          <el-col :span="22">
            <img src="../assets/文字logo.png" />
          </el-col>
          <el-col :span="2">
            <el-divider direction="vertical" class="verticalsplit"></el-divider>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xl="2" :lg="2" :md="2" :sm="2" :xs="2" style="text-align: left">
        <span
          style="
            font-size: 38px;
            font-weight: 600;
            line-height: 60px;
            font-family: STSong;
          "
          >创作</span
        >
      </el-col>
      <el-col :span="1" :offset='6' style="margin-top:15px" >
        <el-button type="success" size="mini" @click="toMarkdown">markdown</el-button>
      </el-col>
      <el-col :xl="1" :lg="1" :md="2" :sm="2" :xs="0" >
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-badge is-dot class="item" style="margin-top: 14px">
              <el-avatar
                shape="circle"
                :size="30"
                fit="cover"
                src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
              ></el-avatar>
            </el-badge>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a" icon="el-icon-plus"
              >个人中心</el-dropdown-item
            >
            <el-dropdown-item command="a" icon="el-icon-circle-plus"
              >退出登录</el-dropdown-item
            >
            <el-dropdown-item class="clearfix">
              消息中心
              <el-badge class="mark" :value="99" />
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-divider class="headsplit"></el-divider>
    </el-row>
    <el-row>
      <el-col :span="11" :offset="6">
        <el-card class="box-card">
          <el-row>
            <el-col :span="24">
              <el-input v-model="input" placeholder="请输入标题"></el-input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="24">
              <template v-if="selectEditor">
                <Markdowns></Markdowns>
              </template>
              <template v-else>
                <Markdown></Markdown>
                
              </template>
            </el-col>
          </el-row>
          <el-row class="cover">
            <el-col :span="3"> 添加封面： </el-col>
            <el-col :span="3">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-row>

          <el-row type="flex" class="row-bg" justify="end">
            <el-col :span="3">
              <el-button type="success">保存草稿</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="primary">发布</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-backtop target=".box-card"></el-backtop>
  </div>
</template>
<script>
import Markdown from "@/components/Markdown.vue";
import Markdowns from "@/components/Markdowns.vue";
export default {
  data() {
    return {
      selectEditor: false,
      imageUrl:'',
      input:''
    };
  },
  components: {
    Markdown,
    Markdowns,
  },
  methods:{
    toMarkdown(){
      console.log("进来了")
      this.selectEditor=!this.selectEditor;
    },
    beforeAvatarUpload(){

    },
    handleAvatarSuccess(){

    }
  }
};
</script>

<style scoped>
.headselect {
  line-height: 61px;
}
.headsplit {
  margin-top: 62px;
  margin-bottom: 0px;
}
.verticalsplit {
  height: 57px;
  margin-top: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.cover {
  margin-top: 15px;
}
.box-card {
  width: 865px;
}
</style>